<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>任务清单</title>
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/iconfont2/iconfont.css">
		<script src="https://unpkg.com/vue@next"></script>
		<script src="js/data.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="con_list">
				<header> 
					<span class="iconfont icon-fanhui"></span> 
						我的任务 
					<span class="iconfont icon-xitongcaidan"></span>
				</header>
				<!-- banner -->
				<div class="top">
					
				</div>
				<!-- banner end-->
				<h4>今日任务</h4>
				<todo-add></todo-add>
			
				<todo-list></todo-list>
				
				
			</div>
		</div>
		
		<script>
			
			const { ref,reactive,computed } = Vue;
			
			const app = Vue.createApp({});
			
			app.component('todo-list',{
				template:`<div class="toDoList">
					<div class="list"  v-for="(item,index) in todos">
						<div class="content">
							<input type="checkbox" :checked="item.checked" @click="checkTodo(item.id)">
							<span :class="{active:item.checked}">{{item.title}}</span>
							<!-- <span>{{item.time}}</span>-->
							<span @click="del(index)">x</span>
						</div>
					</div>
					
					<teleport to=".container">
						<div class="des">
							<span>任务总数<i>{{total}}</i>;</span>
							<span>还有<i>{{remainder}}</i>项未完成</span>
							<span @click="delCompeted">[完成]</span>
							<span @click="delAll">清空</span>
						</div>
					</teleport>
					
				</div>`,
				setup(){
					let todos = reactive(list);
					
					//计算当前任务总数
					const total = computed(()=>{
						return todos.length;
					});
					//计算剩余任务数
					const remainder = computed(()=>{
						return todos.filter(item=>item.checked == false).length;
					});
					//删除当前项
					const del = (index) =>{
						//console.log(index);
						alert("您确定要删除吗？")
						todos.splice(index,1);
					};
					//选中当前项，改变其布尔值添加样式
					const checkTodo = (id) =>{
						todos.forEach(item=>{
							if(item.id == id){
								item.checked = !item.checked
							}
						})
					};
					
					//删除已经完成的任务，界面只留下未完成的
					const delCompeted = ()=>{
					
						for(let i=todos.length-1;i>=0;i--){
							//console.log(i);
							if(todos[i].checked == true){
								todos.splice(i,1);
							}
						}
						
					};
					//清空任务列表
					const delAll = ()=>{
						todos.splice(0,todos.length);
						console.log(todos);
					};
					return{
						todos,
						total,
						del,
						checkTodo,
						remainder,
						delCompeted,
						delAll
					}
				}
			});
			
			app.component('todo-add',{
				template:`<div class="add">
					<input type="text" placeholder="   请输入要添加的任务,回车添加任务"  @keyup.enter="add">
					
					
				</div>`,
				
				setup(){
					let todos = reactive(list);
					//添加新任务
					const add = (event)=>{
						const obj = {
							id:Math.trunc(Math.random()*100),
							checked:false,
							title:event.target.value,
						}
						event.target.value = '';
						if(obj.title == ""){
							alert("输入任务不能为空");
						}else{
							todos.unshift(obj);
							console.log(todos);
						}
						
					}
					return{
						add,
						todos
					}
				}
			})
			const vm = app.mount('.container');
		</script>
	</body>
</html>